<template>
  <div>
      ts在vue3中使用，ts引入外部库
      <h1>{{colorTwo}}</h1>
      <h1>{{doubleMoney}}</h1>
      <button @click="toGo">点击</button>
      <hr>
      <game-one :money="123243" car="奔驰"></game-one>
  </div>
</template>

<script setup lang="ts">
  import {ref,reactive,computed,toRefs} from 'vue'
  import gameOne from './GameOne.vue'
  //1  ref的TS写法
  let cc=ref(88);
  let bnum=ref<number>(99)
  
  interface Todo{
    name:string,
    age:number
  }
  // let listobj=ref<Array<Todo>>
  let listobj=ref<Todo[]>(
      [{
        name:"你好",age:88     
    },
    {
      name:"地方",age:100,
    }]
  )

  // reactive的ts写法
   type myState={
      name:string
  }
  // 用接口或type 去注解（约束）reactive
  interface Istate{
    myname:string,
    color:number,
    turn(x:string):void,
    colorTwo:number
  }
  let state:Istate=reactive({
    myname:"小李",
    color:123,
    turn(x:string){
    },
    colorTwo:computed(()=>{
      return state.color*2
    })
  })
  console.log(state.colorTwo)
  let {colorTwo,myname,turn,color}=toRefs(state);

  // 3 computed计算属性的ts
  let count=ref<number>(2.343)
  const doubleMoney = computed<string>(() => (count.value * 2).
  toFixed(2));
// 4. 事件函数的ts
  let toGo=(x:string)=>{
      console.log(x)
  }
  

</script>
